<template>
  <div>
    <el-row>
      <div style="float: left">
        <el-input
          v-model="keyword"
          placeholder="关键字搜索"
          style="width: 200px"
        ></el-input>
        <el-button size="mini" @click="list">搜索</el-button>
      </div>
      <div style="float: right">
        <el-button size="mini" type="success" @click="addHandler"
          >添加用户</el-button
        >
      </div>
    </el-row>
    <el-row>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column prop="name" label="序号" width="180"></el-table-column>
        <el-table-column
          prop="manager"
          label="用户名"
          width="180"
        ></el-table-column>
        <el-table-column prop="address" label="头像"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="edit(scope.index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="remove(scope.index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-dialog
        :title="dialogTitile"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8081/sw/user/add"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "user",
  data() {
    return {
      dialogTitile: "添加用户",
      dialogVisible: false,
      imageUrl: "",
      form: {
        username: "",
        password: "",
        image: "",
      },
    };
  },
  methods: {
    // 添加用户方法
    addHandler() {
      this.dialogVisible = true;
    },
    handleAvatarSuccess() {},
  },
};
// lang="scss" ::
</script>
<style  scoped>

.avatar-uploader >>> .el-upload {
  border: 1px dashed #c3c3c3;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>